import useGetHit from "@/app/[language]/query/useGetHit";
import usePostHit from "@/app/[language]/query/usePostHit";
import { HitViewLoading } from "@/components/Loading";
import { useTranslations } from "next-intl";
import { useEffect } from "react";

export default function HitView() {
  const t = useTranslations();

  const {
    data: [hitBefore, hit],
    isFetched: isHitLoaded,
  } = useGetHit();

  const { mutateAsync: postHit } = usePostHit();

  useEffect(() => {
    (async () => {
      await postHit();
    })();
  }, [postHit]);

  return (
    <>
      <h5>{t("hit00")}</h5>
      {isHitLoaded ? (
        <span>
          {t("hit01", { hitBefore })}
          <br />
          {t("hit02", { hit })}
          <br />
          {t("hit03")}
        </span>
      ) : (
        <HitViewLoading />
      )}
    </>
  );
}